<template>
	<div>
		<top-bar-no-back :opacity="false" :displayPlaceHolder="true">
			<div class="s-box">
				<div class="back-box" @click="backFun">
					<uv-icon name="arrow-left" color="#fff" size="26"></uv-icon>
				</div>
				<div class="search-box" :style="{'height':currentEnv == 'h5OrApp' ? '70rpx' : `${capsuleHeight}px`,'line-height':currentEnv == 'h5OrApp' ? '70rpx' : `${capsuleHeight}px`}">			 	 			 
					<!-- <uv-icon name="search" color="#fff" size="22"></uv-icon>-->
					<uv-input v-model="searchKey" @blur="$emit('goSearch',searchKey)" color="#fff" shape="circle" :focus="true" placeholder="请输入关键词搜索" border="none" :customStyle="{'padding-top':'0px','padding-bottom':'0px'}">
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
						<uv-icon name="search" color="#fff" size="22" @click="$emit('goSearch',searchKey)"></uv-icon>
						</template>
					</uv-input>
				</div>
			</div>
		</top-bar-no-back>
	 
	</div>
</template>
<script setup>
	import {storeToRefs} from 'pinia';
	import {useSystemStore} from "@/stores/system.js";
	import topBarNoBack from '@/components/topBarNoBack/index.vue';
	const systemStore=useSystemStore();
	const {currentEnv,capsuleHeight}=storeToRefs(systemStore);
	const searchKey=ref('');
	const backFun=()=>{
		const pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack({
				delta: 1
			});
		} else {
			uni.switchTab({
				url: '/pages/index/index',
				fail: function(err) {
				
				},
			}); //app端分享后页面栈为1
		}
	}
</script>
<style lang="scss" scoped>
	.s-box{
		//padding:0 42.31rpx 0 22.46rpx;
		padding:0 10rpx 0 0rpx;
		box-sizing: border-box;
		display:flex;
		align-items: center;
		.back-box{
			margin-right:20rpx;
		}
		.search-box{
			box-sizing: border-box;
			width:100%;
			display:flex;
			align-items: center;
			justify-content: flex-end;
			 background: rgba(30,30,30,1);
			 border-radius: 10rpx;
			 border: 1rpx solid rgba(30,30,30,1);
			 padding:0 10px;
			margin-right:16rpx;  
			// .search-box-uv{
			// 	padding-top:0;
			// 	padding-bottom:0;
			// 	border:none;
			// }
			.text{
				margin:0 5px;
				 color:#fff;
				 font-size: 27rpx;
				 font-family: PingFangSC, PingFang SC;
				 font-weight: 400;
			   
			}
			    
		}
		&.s-box-fixed{
			.search-box{
				 background: rgba(185,195,201,0.2);
			}
					 
		}
	}
</style>